
import { useState } from "react";

import styled from "styled-components";
import iconHash from "Iconlibs/hash";
import IconList from "redux/reducers/label";

const IconSelectSectionWrapper = styled.div`
  display: flex;
  max-width: 100%;
  flex-direction: column;
  .icon-selected {
    padding: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
  }
  .icon-total {
    .title {
      padding: 10px;
    }
    .icon-content {
      display: flex;
      flex-wrap: wrap;
    }
  }
`;

const IconSelectSection = (props: any) => {
  const { Icon, onChange } = props.value;
  const getClass = (_icon: React.FC) => {
    if (_icon === SelectedIcon.icon) {
      return "selected";
    } else {
      return "";
    }
  };
  const [SelectedIcon, setSelectedIcon] = useState({ icon: Icon });
  const ShowIcon = SelectedIcon.icon;
  const handleIconClick = (_icon: React.FC) => {
    setSelectedIcon({ icon: _icon });
    //_icon为React.FC
    onChange(_icon);
  };

  return (
    <IconSelectSectionWrapper>
      <div className="icon-selected">
        <span className="icon-span">标签图标</span>
        <ShowIcon />
      </div>
      <div className="icon-total">
        {IconList.map((section) => {
          return (
            <>
              <div className="title">{section.title}</div>
              <ol className="icon-content">
                {section.Icons.map((icon) => {
                  //icon為string
                  return (
                    <li
                      onClick={() => {
                        handleIconClick(iconHash[icon]);
                      }}
                    >
                      <IconRound
                        //icon为string
                        value={{ Icon: icon, iconClass: getClass(iconHash[icon]) }}
                      />
                    </li>
                  );
                })}
              </ol>
            </>
          );
        })}
      </div>
    </IconSelectSectionWrapper>
  );
};
const IconRound = (props: any) => {
  const { Icon, iconClass } = props.value;
  //_Icon为React.FC
  const _Icon=iconHash[Icon]
  const IconRoundWrapper = styled.div`
    margin: 10px;
    text-align: center;
    width: 50px;
    height: 45px;
    border-radius: 8px;
    background-color: #e7e7e7;
    overflow: hidden;
    .selected {
      width: 100%;
      height: 100%; 
      background-color: #ffd64e;
      svg{
        path{
          fill: white;
        }
      }
    }
    svg {
      margin: 8px 6px;
    }
  `;
  return (
    <IconRoundWrapper>
      <div className={iconClass}>
        <_Icon></_Icon>
      </div>
    </IconRoundWrapper>
  );
};
export default IconSelectSection;
